<template>
  <el-dialog :destroy-on-close="true" :visible.sync="dialog" :append-to-body="true" :width="width" :height="width" @close="close()">
    <section>
      <video ref="video" muted class="full-height full-width" controls width="800px" />
    </section>
  </el-dialog>
</template>
<script>
const Hls = require('hls.js')
export default {
  name: 'HlsVideo',
  components: {
  },
  data() {
    return {
      height: '650px',
      width: '850px',
      dialog: false,
      hls: '',
      url: null
    }
  },
  beforeDestroy() {
    // this.videoPause()
  },
  methods: {
    loadCamera() {
      if (this.url) {
        setTimeout(this.getStream, 30)
      } else {
        this.$message({
          message: '非法的预览地址',
          type: 'error'
        })
      }
    },
    getStream() {
      const video = this.$refs.video
      if (Hls.isSupported()) {
        this.hls = new Hls()
        this.hls.loadSource(this.url)
        this.hls.attachMedia(video)

        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log('加载成功')
          video.play()
        })
        this.hls.on(Hls.Events.ERROR, (event, data) => {
          console.log('加载失败')
        })
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = this.url
        video.addEventListener('loadedmetadata', function() {
          video.play()
        })
      } else {
        this.$message({
          message: 'HLS不支持HLS播放',
          type: 'error'
        })
      }
    },
    close() {
      this.$emit('tell', true)
    }
  }
}
</script>
  <style scoped>
  </style>
